import './TempImageTextA02.scss'

import { useEffect, useState } from 'react'
import { ColorCallBack, getNestedValue, assemblyDataA01 } from '../Utils'
import { LayoutDeftula } from '../Config/LayoutDeftula'
import { ICONMapping } from '../Config/IconMapping'

const testData = [
    { icon: 'SyncOutlined', label: '加载...', value: '0', unit: '个' },
    { icon: 'SyncOutlined', label: '加载...', value: '0', unit: '个' },
    { icon: 'SyncOutlined', label: '加载...', value: '0', unit: '个' },
    { icon: 'SyncOutlined', label: '加载...', value: '0', unit: '个' },
]

const TempImageTextA02 = ({ config, apiData }) => {
    const [Data, setData] = useState([])

    const configuration = config || LayoutDeftula.ImageTextA02
    const { list_dataType, list_apiName, list_dataLevel, listArr, describe, field, unit,
        flex, width, padding_top, padding_left, margin_top, margin_left,
        back_fill, back_deg, icon_fill, icon_size, icon_padding, back_border, border_width, border_type, border_color,
        title_padding, title_fill, title_fontSize, title_fontFamily, title_fontWeight, title_fontStyle, title_shadowX, title_shadowY, title_shadowB, title_shadowC,
        field_fill, field_fontSize, field_fontFamily, field_fontWeight, field_fontStyle, field_shadowX, field_shadowY, field_shadowB, field_shadowC,
        unit_fill, unit_fontSize, unit_fontFamily, unit_fontWeight, unit_fontStyle, unit_shadowX, unit_shadowY, unit_shadowB, unit_shadowC,
    } = configuration

    const backStyle = {
        width: `calc(${width}% - ${margin_left * 2}px  )`,
        padding: `${padding_top}px ${padding_left}px`,
        margin: `${margin_top}px ${margin_left}px`,
        background: ColorCallBack(back_fill, back_deg),
        border: back_border ? `${border_width}px ${border_type} ${border_color}` : 'none',
    }

    const iconStyle = {
        color: icon_fill,
        fontSize: icon_size,
        padding: icon_padding
    }

    const titleStyle = {
        margin: `${title_padding}px 0`,
        color: title_fill,
        height: title_fontSize,
        lineHeight: title_fontSize + 'px',
        fontSize: title_fontSize,
        fontFamily: title_fontFamily,
        fontWeight: title_fontWeight,
        fontStyle: title_fontStyle,
        filter: `drop-shadow(${title_shadowX}px ${title_shadowY}px ${title_shadowB}px ${title_shadowC})`
    }

    const fieldStyle = {
        color: field_fill,
        height: field_fontSize,
        lineHeight: field_fontSize + 'px',
        fontSize: field_fontSize,
        fontFamily: field_fontFamily,
        fontWeight: field_fontWeight,
        fontStyle: field_fontStyle,
        filter: `drop-shadow(${field_shadowX}px ${field_shadowY}px ${field_shadowB}px ${field_shadowC})`
    }

    const unitStyle = {
        color: unit_fill,
        height: unit_fontSize,
        lineHeight: unit_fontSize + 'px',
        fontSize: unit_fontSize,
        fontFamily: unit_fontFamily,
        fontWeight: unit_fontWeight,
        fontStyle: unit_fontStyle,
        filter: `drop-shadow(${unit_shadowX}px ${unit_shadowY}px ${unit_shadowB}px ${unit_shadowC})`
    }

    useEffect(() => {
        if (apiData?.length !== 0 && list_apiName) {
            const [urlList] = apiData.filter(v => v.name === list_apiName)
            const data = getNestedValue(list_dataLevel, urlList)
            const renderData = assemblyDataA01({ type: list_dataType, data: data, object: listArr, array: { describe, field, unit } })
            setData(renderData)
        } else setData(testData)
    }, [config, apiData])

    return (
        <div className='TempImageTextA02'>
            {Data.map((item, index) => (
                <div key={index} style={flex === 'column' ? { ...backStyle, flexDirection: flex } : { ...backStyle }}>
                    <div style={iconStyle}>{ICONMapping[item.icon]}</div>
                    <div style={{ alignItems: flex === 'column' ? 'center' : 'flex-start' }}>
                        <div style={titleStyle}>{item.label}</div>
                        <div>
                            <div style={fieldStyle}>{item.value}</div>
                            <div style={unitStyle}>{item.unit}</div>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );
};

export default TempImageTextA02;